<template>
    
    <div class="listLabel">
        <div class="labelTitle" v-html="title+'：'"></div>
        <div class="labelValue">
            <TextAreaLabel  :content="StringValue" v-if="richText"/>
            <div v-if="!richText">
                {{ value }}
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { computed, defineProps } from 'vue';
import TextAreaLabel from './TextAreaLabel.vue';

interface ListLabelProps {
    title:string,
    richText?:boolean
    value?:string|number
}

const props = defineProps<ListLabelProps>();

const StringValue = computed(()=>{
    return props.value+'';
})


</script>
<style lang="less" scoped>
.listLabel{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 0rem;
    margin-bottom: 0.1rem;

    .labelTitle{
        font-size: 16px;
        padding-left: 0;
        color: #888;        
        
        width: 80px;
        text-align: left;
    }        
    .labelValue{
        color: #333;
        font-size: 16px;
        padding-left: 2px;
        width: 200px;
        flex-grow: 1;
        
    }
}
</style>